<template>
    <div>
        <el-card>
            <template>
            <el-select v-model="value" clearable placeholder="请选择事件类型">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
            </el-select>
            </template>
            <el-button type="primary" @click="select" style="margin-left: 10px;">查询</el-button>
        </el-card>
        <el-card>
            <div ref="developer_network" id="developer_network" style="height:800px;width:100%"></div>
        </el-card>
        <el-card>
          <div ref="repo_network" id="repo_network" style="height: 1000px;width: 100%;"></div>
        </el-card>
        <el-card>
          <div ref="project_openrank_detail" id="project_openrank_detail" style="height: 1000px;width: 100%;"></div>
        </el-card>
    </div>
</template>

<script>

import * as echarts from 'echarts';
const ROOT_PATH='https://oss.x-lab.info/open_digger/github/X-lab2017/open-digger/';
    export default {
        name: 'NetworkView',
        data(){
            return{
                categories:null,
                proOpenRankData:null,
                proOpenRankLinks:null,
                proOpenRankGraph:null,
                repoNetData:null,
                repoNetLinks:null,
                repoNetGraph:null,
                devNetGraph:null,
                devNetData:null,
                devNetLinks:null,
                value:'',
                options: [{
          value: 'Developer network',
          label: 'Developer network'
        }, {
          value: 'Repo network',
          label: 'Repo network'
        }, {
          value: 'Project OpenRank',
          label: 'Project OpenRank'
        }],
            }
        },
        methods:{
            initProRankGraph(){
                this.proOpenRankGraph=echarts.init(this.$refs.project_openrank_detail);
                // console.log(this.generateRankEchartsOption());
                this.proOpenRankGraph.setOption(this.generateRankEchartsOption());
                // console.log(this.proOpenRankGraph);
                // console.log(this.proOpenRankGraph.series[0].data);
                // console.log(this.proOpenRankGraph.series[0].links);
            },
            generateRankEchartsOption(){
                return{
                    title:{
                        text:'Project OpenRank',
                        left:'center'
                    },
                    tooltip:{},
                    legend:{
                        data:['Project OpenRank'],
                        top:'bottom'
                    },
                    series:[{
                        name:'Project OpenRank',
                        type:'graph',
                        layout:'force',//使用力导向布局
                        force:{
                            repulsion:1000,//增加节点间的排斥力
                            edgeLength:[100,200],//调整边长范围
                            layoutAnimation:true
                        },
                        roam:true,
                        focusNodeAdjacency:true,
                        label:{
                            show:true,
                            position:'right',
                            formatter:'{b}',
                            distance:10,//标签与结点的距离
                        },
                        lineStyle:{
                            color:'source',
                            curveness:0.3
                        },
                        symbolSize:(value)=>Math.log(value[1]+1)*10,//动态调整节点大小
                        emphasis:{
                            focus:'adjacency',
                            lineStyle:{
                                width:10
                            },
                            label:{
                                show:false,//鼠标悬停时隐藏标签
                            }
                        },
                        data:this.proOpenRankData,
                        links:this.proOpenRankLinks,
                        animationDuration:1500,
                        animationEasingUpdate:'quinticInOut',
                    }]
                };
            },
            async getProRankData(url){
                try{
                    const res=await this.$request.post('/api/data',{
                        platform:"github",
                        org:"X-lab2017",
                        repo:"open-digger",
                        index:url
                    })
                    // const res=await axios.get(ROOT_PATH+url);
                    const graph=res.data;

                    this.proOpenRankData=graph.nodes.map(n=>({
                            id:n.id,
                            name:n.n,
                            value:n.v,
                            symbolSize:n.v*2,
                            // category:n.c,
                            itemStyle:{
                                color:(()=>{
                                    const colors={
                                        r:'#ff0000',
                                        i:'#00ff00',
                                        p:'#0000ff',
                                        u:'#ffff00'
                                    };
                                    return colors[n.c] || '#cccccc'
                                })()
                            }
                        }));
                    this.proOpenRankLinks=graph.links.map(e=>({
                            source:e.s,
                            target:e.t,
                            value:e.w,
                            lineStyle:{
                                // opacity:0.7
                            }
                        }));
                        // console.log(this.proOpenRankData);
                        // console.log(this.proOpenRankLinks);
                }catch(e){
                    this.$router.push('/login')
                    this.$message.error('获取数据失败，请重新登录')
                }
            },
            initRepoNetGraph(){
                    this.repoNetGraph=echarts.init(this.$refs.repo_network);
                    this.repoNetGraph.setOption(this.generateRepoEchartsOption());
            },
            generateRepoEchartsOption(){
                return {
                    title:{
                        text:'Repo network',
                        left:'center'
                    },
                    tooltip:{
                       
                    },
                    animationDuration:1500,
                    animationEasingUpdate: 'quinticInOut',
                    series:[{
                        name:'Repo network',
                        type:'graph',
                        layout: 'force',
                        data: this.repoNetData,
                        links: this.repoNetLinks,
                        roam: true,
                        label:{
                            position:'right',
                            show:true
                        },
                        lineStyle:{
                            color:'source',
                            curveness:0.3
                        },
                        force:{
                            layoutAnimation: false,
                            edgeLength: [50, 300],
                            repulsion: 400,
                        },
                        emphasis:{
                            focus:'adjacency',
                            lineStyle:{
                                width:10
                            }
                        }
                    }]
                }
            },
            async  getRepoNetGraph(url){
            try{
                const res=await this.$request.post('/api/data',{
                    platform:"github",
                    org:"X-lab2017",
                    repo:"open-digger",
                    index:url
                })
                // const res=await axios.get(ROOT_PATH+url);
                let graph=res.data;
                        // console.log(graph);
                this.repoNetData=graph.nodes.map(n=>{
                    return {
                        id:n[0],
                        name:n[0],
                        value:n[1],
                        SymbolSize:Math.log(n[1]+1)*10
                        };
                        });
                this.repoNetLinks=graph.edges.map(e=>{
                    return {
                        source:e[0],
                        target:e[1],
                        value:e[2]/100
                        };
                        });
                    
            }catch(e){
                this.$router.push('/login')
                this.$message.error('获取数据失败，请重新登录')
            }
            },
            initDevNetGraph(){
                    this.devNetGraph=echarts.init(this.$refs.developer_network);
                    this.devNetGraph.setOption(this.generateRDevEchartsOption());
            },
            generateRDevEchartsOption(){
                return {
                    title:{
                        text:'Developer network',
                        left:'center'
                    },
                    tooltip:{
                       
                    },
                    animationDuration:1500,
                    animationEasingUpdate: 'quinticInOut',
                    series:[{
                        name:'Developer network',
                        type:'graph',
                        layout: 'force',
                        data: this.devNetData,
                        links: this.devNetLinks,
                        roam: true,
                        label:{
                            position:'right',
                            show:true
                        },
                        lineStyle:{
                            color:'source',
                            curveness:0.3
                        },
                        force:{
                            layoutAnimation: false,
                            edgeLength: [50, 300],
                            repulsion: 400,
                        },
                        emphasis:{
                            focus:'adjacency',
                            lineStyle:{
                                width:10
                            }
                        }
                    }]
                }
            },
          async  getDevNetGraph(url){
            try{
                const res=await this.$request.post('/api/data',{
                    platform:"github",
                    org:"X-lab2017",
                    repo:"open-digger",
                    index:url
                })
                // const res=await axios.get(ROOT_PATH+url);
                let graph=res.data;
                        // console.log(graph);
                this.devNetData=graph.nodes.map(n=>{
                    return {
                        id:n[0],
                        name:n[0],
                        value:n[1],
                        SymbolSize:Math.log(n[1]+1)*10
                        };
                        });
                this.devNetLinks=graph.edges.map(e=>{
                    return {
                        source:e[0],
                        target:e[1],
                        value:e[2]/100
                        };
                        });
                    
            }catch(e){
                this.$router.push('/login')
                this.$message.error('获取数据失败，请重新登录')
            }
            },
            select() {
                let targetRef;
                switch (this.value) {
                    case 'Developer network':
                        targetRef = this.$refs.developer_network;
                        break;
                    case 'Repo network':
                        targetRef = this.$refs.repo_network;
                        break;
                    case 'Project OpenRank':
                        targetRef = this.$refs.project_openrank_detail;
                        break;
                    default:
                        this.$message.error('请选择事件类型');
                        return;
                }
                if (targetRef) {
                    targetRef.scrollIntoView({ behavior: 'smooth' });
                }
                this.value='';
            }
        },
        mounted(){
            this.getDevNetGraph('developer_network').then(()=>{
                this.$nextTick(()=>{
                    this.initDevNetGraph();
                    // console.log(this.devNetData)
                })
                
            });
            this.getRepoNetGraph('repo_network').then(()=>{
                this.$nextTick(()=>{
                    this.initRepoNetGraph();
  
                })
                
            });
            this.getProRankData('project_openrank_detail/2023-06').then(()=>{
                this.$nextTick(()=>{
                    this.initProRankGraph();
                })
            })
        },
        created(){

        },
        beforeDestroy(){
            if(this.proOpenRankGraph){
                this.proOpenRankGraph.clear();
            }
            if(this.repoNetGraph){
                this.repoNetGraph.clear();
            }
            if(this.devNetGraph){
                this.devNetGraph.clear();
            }
            // this.$refs.developer_network && this.$refs.developer_network.clear();
            // this.$refs.repo_network && this.$refs.repo_network.clear();
            // this.$refs.project_openrank_detail && this.$refs.project_openrank_detail.clear();
        }
    }
</script>

<style scoped>

</style>